<template>
  <div class="box">
    <h1>品牌制造商直供</h1>
    <ul>
      <li v-for="item in brandList" :key="item.id" >
        <img :src="item.pic_url" alt="" />
        <strong>{{item.name}}</strong>
        <p>{{item.floor_price | formarMoney}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Brand",
  data() {
    return {};
  },
  // 在子组件中接收父组件传递进来的数据
  props: ["brandList"],
  mounted() {
    
  },
};
</script>

<style scoped lang='less'>
.box {
  
    h1{
        margin-top:30px;
        margin-bottom: 20px;
         text-align: center;
        font-size:30px;
    }
  ul {
    display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    li {
       width: 49%;
       position: relative;
       margin-top:10px;
      img {
         width:100%;
        display: block;
      }
      strong,p{
        position: absolute;
        font-size:18px;
        top:10px;
        left:10px
      }
      strong{
        font-weight:700;
      }
      p{
        top:40px;
        color:red;
      }
    }
  }
}
</style>
